<template>
  <div id="resultMain">
    <div class="resultBody" style="margin-top: 5px">
      <el-tabs v-model="activeName">
        <el-tab-pane label="执行日志" name="executeLog">
            <h2>执行日志
              {{code}}
            </h2>
        </el-tab-pane>
        <el-tab-pane label="执行结果" name="executeResult">
          <!--<div class="executeResult" v-if="activeName==='executeLog'">-->
            <el-table :data="result.data" border style="width: 100%"
                      >
              <el-table-column
                  v-for="(column, key) in metadata"
                  :key="key"
                  :prop="key"
                  :label="key"
              >
                <template slot="header" slot-scope="scope" class="headerColor">
                  <el-tooltip class="item"
                              effect="dark"
                              placement="top">
                    <!--:content="key+':  '+column.tableName  + column.columnComment "-->
                    <div slot="content">
                      {{ key }}:<br/>
                      &nbsp;&nbsp;{{ column.databaseName }}.{{ column.tableName }} <br/>
                      &nbsp;&nbsp;{{ column.columnType }}: {{ column.columnSize }} <br/>
                      &nbsp;&nbsp;{{ column.columnComment }}
                    </div>
                    <span>
                  <i class="fas fa-table"></i>
                  {{ scope.column.label }}
                </span>
                  </el-tooltip>
                </template>
                <!--:render-header="renderHeader"-->
              </el-table-column>
            </el-table>
          <!--</div>-->
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
export default {
  name: "Result",
  props: {
    metadata: {},
    code: '',
    result: {executorType: '', metaData: {}, data: []},
  },
  data() {
    return {
      activeName: '',
      columns: [
        {prop: 'name', label: 'Name'},
        {prop: 'age', label: 'Age'},
        {prop: 'email', label: 'Email'}
      ],
      tableData: [
        {name: 'John Doe', age: 30, email: 'john.doe@example.com'},
        {name: 'Jane Smith', age: 25, email: 'jane.smith@example.com'}
      ]
    }
  },
  methods: {
    renderHeader(h, {column}) {
      console.log(column)
      return h('el-tooltip', {
        props: {
          effect: 'dark',
          content: '这是日期列的提示信息',
          placement: 'top'
        }
      }, [
        column.label,
        h('i', {class: 'fas fa-table'})
      ]);
    }
  }
}
</script>

<style scoped>
</style>
